<template>

    <div class="M_editor">
        <el-input v-model="choicestitle" placeholder="请输入文章标题" size="large"></el-input>
        <el-input v-model="chiocedescribe" class="m-t-2" placeholder="请输入文章简要" size="large"></el-input>        
        <el-select v-model="choicescate" class="m-y-2" placeholder="选择分类">

            <el-option v-for="item in cates" :key="item.value" :label="item.value" size="large" :value="item.value" />
        </el-select>
    </div>
    <Editor height="30rem" v-model="context" ref="editor" class="editor"></Editor>
    <el-button type="info" size="large" class="m-t-2" @click="upload">确定</el-button>
</template>

<!------------------------------>

<script setup lang="ts">
import type { AxiosResponse } from 'axios';
import Editor from '../../components/markdownEditor.vue'
const global = getCurrentInstance()
const route=useRoute()


//Flag:初始赋值
let editor = ref()

//BUG:解决获取子组件实例的方法:定时器获取
// setTimeout(() => {
//     editor.value.setValue()
// }, 100)

//Flag:获得的信息
let choicescate = ref()
let choicestitle = ref()
let context = ref()
let chiocedescribe=ref()
//Flag:获取分类数据

let cates = ref()
    //API
global?.proxy?.$axios.get('v1/getcategories').then((res) => {
    cates.value = res?.data.data.map((item: any) => {
        return {
            value: item.categoryname
        }
    })
    console.log(cates.value)
})

//Flag:博客更新
const upload = () => {
    //API
    global?.proxy?.$axios.put('/v1/updataarticle', {
        id: route.params.id,
        context: context.value,
        categoryname: choicescate.value,
        articlename: choicestitle.value,
        describe:chiocedescribe.value
    }).then((res: any) => {
        if (res?.data.status == 200) {
            ElMessage.success({
                message: "上传成功!!",
                center: true
            })
        }
    })
}

//Flag:获取单个博客信息
if (route.params.id)
    //API
    global?.proxy?.$axios.get(`/v1/getonearticle/${route.params.id}`).then((res: AxiosResponse) => {
        if (res.data.status == 200) { 
            choicestitle.value = res.data.data.article
            choicescate.value = res.data.data.categoryname
            chiocedescribe.value = res.data.data.describe
            editor.value.setValue(res.data.data.context)
        }
    })


</script>

<!------------------------------>

<style scoped lang="scss">
</style>